/**
 * 学习目标：react - setState的第二种写法
 * 函数: (上一次的state)=> 返回 新的 state
 * 作用：可以帮我实现依赖上一次的state而更新页面
 * 最终只会渲染页面一次，依然保持高性能
 */
import React from 'react';
export default class App extends React.Component {
  state = { count: 0 };
  handleClick = () => {
    // sst
    // 多次调用不会直接全部执行，而是会合并
    // this.setState({ count: this.state.count + 1 });
    // this.setState({ count: this.state.count + 2 });
    // this.setState({ count: this.state.count + 3 });
    this.setState((preState) => {
      console.log('上一次state的值 -----> ', preState);
      return { count: preState.count + 1 };
    });
    this.setState((preState) => {
      console.log('上一次state的值 -----> ', preState);
      return { count: preState.count + 2 };
    });
    this.setState((preState) => {
      console.log('上一次state的值 -----> ', preState);
      return { count: preState.count + 3 };
    });
  };
  componentDidUpdate() {
    console.log('componentDidUpdate -----> ', this.state.count);
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我+1</button>
        count - {this.state.count}
      </div>
    );
  }
}
